<template>
  <config-provider v-show="!isLock" :locale="zhCN">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </config-provider>
  <transition name="slide-up">
    <lock-screen v-if="isLock && $route.name != 'login'" />
  </transition>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { ConfigProvider } from 'ant-design-vue'
import { LockScreen } from '@/components/lockscreen'
import { useStore } from '@/store'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'App',
  components: { ConfigProvider, LockScreen },
  setup() {
    const route = useRoute()
    const store = useStore()
    const isLock = computed(() => store.state.lockscreen.isLock)
    const lockTime = computed(() => store.state.lockscreen.lockTime)

    let timer

    const timekeeping = () => {
      clearInterval(timer)
      if (route.name == 'login' || isLock.value) return
      // 设置不锁屏
      store.commit('lockscreen/setLock', false)
      // 重置锁屏时间
      store.commit('lockscreen/setLockTime')
      timer = setInterval(() => {
        // 锁屏倒计时递减
        store.commit('lockscreen/setLockTime', lockTime.value - 1)
        if (lockTime.value <= 0) {
          // 设置锁屏
          store.commit('lockscreen/setLock', true)
          store.commit('lockscreen/setLockUrl', window.location.href)
          return clearInterval(timer)
        }
        // console.log(lockTime.value, '锁屏倒计时')
      }, 1000)
    }

    onMounted(() => {
      document.addEventListener('mousedown', timekeeping)
    })

    onUnmounted(() => {
      document.removeEventListener('mousedown', timekeeping)
    })

    return {
      zhCN,
      isLock
    }
  }
})
</script>

<style lang="scss">
@import '~@/styles/global.scss';
@import '~@/styles/common.scss';
@import '~@/styles/override.scss';
@import '../node_modules/vue-color-kit/dist/vue-color-kit.css';

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.35s ease-in;
}
.line_bg {
  background-image: url(https://img.alicdn.com/imgextra/i3/573804794/O1CN01nfvUuq1lHhdvW1Pu1_!!573804794.png);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}
.slide-up-enter-form,
.slide-up-leave-to {
  transform: translateY(-100%);
}
.table-page-search-wrapper {
  padding-bottom: 24px;
}
.w-e-toolbar {
  z-index: 10 !important;
}
.w-e-text-container {
  z-index: 9 !important;
}
.width100 {
  width: 100%;
}
.ant-tabs-tab.ant-tabs-tab-active::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 4px;
  background-color: #1677ff;
  content: '';
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab,
.ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab {
  background-color: #fafafa !important;
  border-radius: 0px !important;
}
.kj_color_qianshuren_0 {
  background: rgba(255, 99, 99, 0.12);
  border: 1px dashed #ff6363 !important;
  border-radius: 5px;
  padding: 0px 8px;
}
.kj_color_qianshuren_1 {
  background: rgba(217, 246, 248, 0.12);
  border: 1px dashed rgb(10, 187, 198) !important;
  border-radius: 5px;
  padding: 0px 8px;
}
.kj_color_qianshuren_2 {
  background: rgba(255, 99, 99, 0.12);
  border: 1px dashed rgb(123, 56, 242) !important;
  border-radius: 5px;
  padding: 0px 8px;
}
.kj_color_qianshuren_3 {
  background: rgba(253, 234, 209, 0.12);
  border: 1px dashed rgb(255, 140, 10) !important;
  border-radius: 5px;
  padding: 0px 8px;
}
.kj_color_qianshuren_4 {
  background: rgba(255, 173, 225, 0.12);
  border: 1px dashed #ff8de3 !important;
  border-radius: 5px;
  padding: 0px 8px;
}
</style>
